<template>
  <Echart
    id="leftMiddle"
    :options="options"
    class="left-middle_inner"
    v-if="pageflag"
    ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
export default {
  data() {
    return {
      options: {},
      pageflag: false,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      let res = {
        1: 35,
        "-1": 0,
      };
      const nameArr = [];
      const valueArr = [];
      for (const i in res) {
        const name = i === "1" ? "正常" : "报警";
        nameArr.push(name);
        valueArr.push(res[i]);
      }
      const data = [nameArr, valueArr];
      this.pageflag = true;
      this.$nextTick(() => {
        this.init(data);
      });
    },
    init([arr1, arr2]) {
      this.options = {
        grid: {
          top: "25px",
          left: "50px",
          right: "30px",
          bottom: "25px",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          data: arr1,
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            label: {
              // 柱体上显示数值
              show: true, // 开启显示
              position: "top", // 在上方显示
              textStyle: {
                // 数值样式
                fontSize: "10px",
                color: "#fff",
              },
              formatter: "{c}",
            },
            data: arr2,
            type: "bar",
            barWidth: "30",
            color: {
              type: "linear",
              x: 0, // 右
              y: 0, // 下
              x2: 0, // 左
              y2: 1, // 上
              colorStops: [
                {
                  offset: 0,
                  color: "#22C6ED", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#9F21F7", // 100% 处的颜色
                },
              ],
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped></style>
